<div
  *ngIf="visible"
  [@fade]="isModalOpen"
  id="modal-container"
  class="modal show {{ modalClass }}"
  tabindex="-1"
  role="dialog"
>
  <div class="modal-backdrop" (click)="close()"></div>
  <div
    id="abp-modal-dialog"
    class="modal-dialog modal-{{ size }}"
    role="document"
    [class.modal-dialog-centered]="centered"
    #abpModalContent
  >
    <div id="abp-modal-content" class="modal-content">
      <div id="abp-modal-header" class="modal-header">
        <ng-container *ngTemplateOutlet="abpHeader"></ng-container>
        ​
        <button id="abp-modal-close-button" type="button" class="close" aria-label="Close" (click)="close()">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div id="abp-modal-body" class="modal-body">
        <ng-container *ngTemplateOutlet="abpBody"></ng-container>
      </div>
      <div id="abp-modal-footer" class="modal-footer">
        <ng-container *ngTemplateOutlet="abpFooter"></ng-container>
      </div>
    </div>
  </div>
  <ng-content></ng-content>
</div>
